<template>

	<cxView :position="position" :zIndex="zIndex" :top="top" :right="right" :bottom="bottom" :left="left" :width="width"
		:height="height" :borderRadius="bgBorderRadius" :margin="margin" :marginTop="marginTop" :marginLeft="marginLeft"
		:marginBottom="marginBottom" :marginRight="marginRight" :background="background" :opacity="opacity"
		display="flex" :justifyContent="justifyContent" :alignItems="alignItems" :padding="padding"
		:paddingTop="paddingTop" :paddingLeft="paddingLeft" :paddingBottom="paddingBottom" :paddingRight="paddingRight"
		@confirm="confirm">
		<image :src="srcCompute" :mode="mode" v-if="isImg"
			:style="{width:$addUnit(width|| size),height: $addUnit(height|| size),borderRadius:$addUnit(borderRadius)} ">
		</image>
		<u-icon :name="srcCompute" v-if="!isImg" :size="size" :color="color"></u-icon>

	</cxView>

</template>

<script>
	/**
	 * 图片
	 * @property {String} mode scaleToFill,缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素,aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。,aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取,widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变,heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变,top裁剪模式，不缩放图片，只显示图片的顶部区域,bottom裁剪模式，不缩放图片，只显示图片的底部区域,center裁剪模式，不缩放图片，只显示图片的中间区域,left裁剪模式，不缩放图片，只显示图片的左边区域,right裁剪模式，不缩放图片，只显示图片的右边区域,top left,top right,bottom left,bottom right,
	 * 
	 */
	export default {
		name: "cxImg",
		data() {
			return {
				sizeValue: '',
				srcValue: '',
				widthValue: '',
				heightValue: '',
				ratioValue: '' //以宽为基准

			};
		},
		computed: {
			isImg() {
				if (this.srcValue && this.srcValue != null && this.srcValue.length > 0) {
					return this.srcValue.indexOf('/') !== -1
				} else {
					return true
				}

			},
			// backgroundColor(){
			// 	return this.bgColor
			// },

			srcCompute() {
				if (this.srcValue == null || this.srcValue.length === 0) {

					this.srcValue = this.defaultImg;
				}
				if (this.isImg) {

					if (this.srcValue.indexOf('http') == -1 && this.srcValue.indexOf('/static/') == -1) {
						this.srcValue = this.$baseUrl + this.srcValue

					}
				}

				return this.srcValue;
			}
		},
		mounted() {
			this.srcValue = this.src;

		},
		watch: {
			width: {
				handler(newModel, oldModel) {
					this.widthValue = newModel
				},
				immediate: true,
			},
			src: {
				handler(newModel) {
					this.srcValue = newModel
					if (this.srcValue == null || this.srcValue.length === 0) {
						this.srcValue = this.defaultImg;
					}
					if (this.isImg) {

						if (this.srcValue.indexOf('http') == -1 && this.srcValue.indexOf('/static/') == -1) {
							this.srcValue = this.$baseUrl + this.srcValue

						}
					}
				},
				immediate: true

			}
		},
		props: {
			position: {
				type: String,
				default: ''
			},
			zIndex: {
				type: [String, Number],
				default: 0
			},
			top: {
				type: [String, Number],
				default: ''
			},
			right: {
				type: [String, Number],
				default: ''
			},
			bottom: {
				type: [String, Number],
				default: ''
			},
			left: {
				type: [String, Number],
				default: ''
			},
			// bgWidth:{
			// 	type:[String,Number],
			// 	default:''
			// },
			// bgHeight:{
			// 	type:[String,Number],
			// 	default:''
			// },
			bgBorderRadius: {
				type: [String, Number],
				default: ''
			},
			padding: {
				type: String,
				default: ''
			},
			paddingTop: {
				type: [String, Number],
				default: ''
			},
			paddingLeft: {
				type: [String, Number],
				default: ''
			},
			paddingBottom: {
				type: [String, Number],
				default: ''
			},
			paddingRight: {
				type: [String, Number],
				default: ''
			},

			margin: {
				type: String,
				default: ''
			},
			marginTop: {
				type: [String, Number],
				default: ''
			},
			marginLeft: {
				type: [String, Number],
				default: ''
			},
			marginBottom: {
				type: [String, Number],
				default: ''
			},
			marginRight: {
				type: [String, Number],
				default: ''
			},
			background: {
				type: String,
				default: ''
			},



			opacity: {
				type: [String, Number],
				default: ''
			},

			transition: {
				type: String,
				default: ''
			},
			display: {
				type: String,
				default: 'flex'
			},
			justifyContent: {
				type: String,
				default: 'center'
			},
			alignItems: {
				type: String,
				default: 'center'
			},
			src: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'scaleToFill'
			},
			width: {
				type: [String, Number],
				default: ''
			},
			height: {
				type: [String, Number],
				default: ''
			},
			ratio: {
				type: [String, Number],
				default: ''
			},
			size: {
				type: [String, Number],
				default: ''
			},
			color: {
				type: [String, Number],
				default: ''
			},
			show: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			preView: {
				type: Boolean,
				default: false
			},
			borderRadius: {
				type: [String, Number],
				default: ''
			},

			/**
			 * 项目属性开始
			 */
			/**
			 * 属性设置在项目上。
			 * order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
			 * https://www.runoob.com/wp-content/uploads/2015/07/59e399c72daafcfcc20ede36bf32f266.png
			 */
			order: {
				type: [String, Number],
				default: ''
			},
			/**
			 * flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
			 *  flex-grow: <number>;  default 0 
			 */
			flexGrow: {
				type: [String, Number],
				default: ''
			},

			/**
			 * flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
			 *   flex-shrink: <number>; 
			 * https://www.runoob.com/wp-content/uploads/2015/07/240d3e960043a729bb3ff5e34987904f.jpg
			 */
			flexShrink: {
				type: [String, Number],
				default: ''
			},

			/**
			 * flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
			 * 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
			 */
			flexBasis: {
				type: [String, Number],
				default: ''
			},
			//占比
			/**
			 * flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
			 *  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
			 */
			flex: {
				type: String,
				default: ''
			},
			/**
			 * align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
			 *  align-self: auto | flex-start | flex-end | center | baseline | stretch;
			 * 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
			 * https://www.runoob.com/wp-content/uploads/2015/07/55b19171b8b6b9487d717bf2ecbba6de.png
			 * 
			 */
			alignSelf: {
				type: String,
				default: ''
			},

			/**
			 * 项目属性结束
			 */

			/**
			 * 默认图片
			 * */
			defaultImg: {
				type: String,
				default: 'photo'
			}
		},

		methods: {

			confirm() {

				if (this.preView) {
					this.$preView([this.src]);
				} else {
					this.emit();
				}


			},
			emit() {
				this.$emit('confirm');
			}


		},


	}
</script>

<style>

</style>